<template>
  <el-container style="height: 100%">
    <el-aside width="200px">
      <el-tree :data="layers" show-checkbox  node-key="id"
               :expand-on-click-node="false"  :default-checked-keys="defaultCheckedKeys" draggable
               :default-expanded-keys="defaultExpandedFolders">
        <template #default="{ node, data }">
          <label class="nodename">{{data.id }}</label>
          <div v-if="!data.groupid">
            <i v-if="data.type==='fill'" class="iconfont icon-mian"></i>
            <i v-if="data.type==='line'" class="iconfont icon-xianlu"></i>
            <i v-if="data.type==='symbol'" class="iconfont icon-dian"></i>
            <i v-if="data.type==='background'" class="iconfont icon-tupian"></i>
            <i v-if="data.type==='raster'" class="iconfont icon-xitongguanli-yaoganyingxiangguanli"></i>
          </div>
        </template>

      </el-tree>

    </el-aside>
    <el-main style="padding: 0;height: 100%"><div id="map" style="width: 100%;height: 100%"></div></el-main>
  </el-container>
</template>

<script>
  import mapboxgl from 'mapbox-gl';

export default {
  name: 'App',
  setup(){
    mapboxgl.accessToken = 'pk.eyJ1IjoiaGFtYnVnZXJkZXZlbG9wIiwiYSI6ImNqNXJtZjF4ZzB3em4yd21pZmVqbHlleDAifQ.I9eqVjtotz7jaU7XcJm9pQ';
  },
  data(){
    return{
      layers:[],
      map:null,
      defaultCheckedKeys: [],/*图层树默认选中的节点*/
      defaultExpandedFolders: [],/*图层默认展开的文件夹*/
    }
  },
  mounted(){
    let map = new mapboxgl.Map({
      container: 'map',
      style: 'http://gykj123.cn:9035/api/v1/styles/gykj/ryFyQme9r'
    });
    map.on("styledata", function () {
      map.resize();
    });
    this.map=map;
    map.on("load",(loadMap)=>{
      let style=this.map.getStyle();
       this.initLayerTree(style)
    })
  },
  methods:{
    /*初始化图层树*/
    initLayerTree(style) {
      let folders = style['metadata'] ? (style['metadata']['mapbox:groups'] ? style['metadata']['mapbox:groups'] : {}) : {}
      let folderIndex = -1
      let layers = style.layers.reverse();
      let mylayers = [];

      for (let i = 0; i < layers.length; i++) {
        let layer = layers[i];

        /*图层显示标记   'visible'显示，'none'隐藏*/
        layer.visibility = layer.layout ? (layer.layout.visibility ? layer.layout.visibility : 'visible') : 'visible';
        if (layer.visibility === 'visible') {
          this.defaultCheckedKeys.push(layer.id);
        }

        /*图层有文件夹信息*/
        if (layer['metadata'] && layer['metadata']['mapbox:group']) {
          let layername = folders[layer['metadata']['mapbox:group']].name;
          let collapsed = folders[layer['metadata']['mapbox:group']].collapsed;/*是否展开文件夹，collapsed=true不展开*/
          if (mylayers[folderIndex] && mylayers[folderIndex]['id'] === layername) {
            //layer级别

            mylayers[folderIndex]['children'].push(layer);
          } else {
            //文件夹级别
            folderIndex++;
            mylayers[folderIndex] = {};
            mylayers[folderIndex]['visibility'] = 'none';
            mylayers[folderIndex]['children'] = [];
            mylayers[folderIndex]['id'] = layername;
            mylayers[folderIndex]['collapsed'] = collapsed;
            mylayers[folderIndex]['children'].push(layer);
            mylayers[folderIndex]['groupid'] = layer['metadata']['mapbox:group'];

            /*当前文件夹是否展开*/
            if (!collapsed) {//collapsed=false时，文件夹默认展开
              this.defaultExpandedFolders.push(layername);
            }
          }

          /*文件夹下有一个图层显示，文件夹就显示*/
          if (!layer.layout || layer.layout.visibility !== 'none') {
            mylayers[folderIndex]['visibility'] = 'visible';
          }
        } else {
          folderIndex++;
          mylayers[folderIndex] = layer;
        }
      }

      this.layers = mylayers;
      console.log(this.layers)
    },
  }

}
</script>
<style scoped lang="less">
.layer_tree {
  /*图层树背景*/
  background-color: white;
  .el-tree {
    background: transparent;
    font-size: 14px;

    /*图层名称 过长省略*/

    .nodename {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 90px;
      display: inline-block;
      text-align: left;
      vertical-align: sub;
      line-height: 17px;
    }
  }

  /*图层树复选框颜色*/

  .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #0268fb;
    border-color: #0268fb;
  }
}
</style>
